var RNFS = require('react-native-fs');
import React, { Component } from 'react';
import FileUtil from '../../../utils/file'
import {
    View,
    Text,
    Image,
    TouchableOpacity,
    StyleSheet,
    TouchableHighlight,
    Alert,
    Modal,
    TextInput,
    Pressable,
    StatusBar,
    ImageBackground,
    BackHandler,
    ToastAndroid,
    TouchableWithoutFeedback,
    PixelRatio,
    Dimensions
} from 'react-native';
// import Swiper from 'react-native-swiper'
import { changeloginStatus, getexam, getuser } from '../../../actions/actionCreators'
import store from '../../../store/configureStore'
import Tikumodel from './comments/tiku'
import SaveTikumodel from './comments/savetiku'
import Videomodel from './comments/video'
import Answermodel from './comments/answer'
import Carousel from 'react-native-snap-carousel';
import { Videos, videopath, examinationpath, userpath } from '../../../utils/path'
import { getHeight, getWidth, scaleSizeW } from '../../../utils/Resolution'
import ToastExample from './comments/ToastExample';

const dp2px = dp => PixelRatio.getPixelSizeForLayoutSize(dp);
const px2dp = px => PixelRatio.roundToNearestPixel(px);

let designSize = { width: 1920, height: 1080 };

let pxRatio = PixelRatio.get();
const win_width = Dimensions.get('window').width;
const win_height = Dimensions.get('window').height;

let width = dp2px(win_width);
let height = dp2px(win_height);
console.log(pxRatio, win_width, win_height, width, height)
let design_scale = designSize.width / width;
height = height * design_scale

let scale = 1 / pxRatio / design_scale;

const horizontalMargin = 20;
const sliderWidth = 800;
const itemWidth = 120 + horizontalMargin * 2;
const itemHeight = 200;
export default class HomePage extends Component {
    constructor(props) {
        // 监听store的数据更新，可以注销更新，unsubscriobe.
        super(props);
        this.state = {
            ...store.getState(),
            newpassworld: "",
            repassworld: "",
            modalVisible: false,//登录框
            passVisible: false,//修改密码
            tikumodalVisible: false,
            SaveTikumodelVisible: false,
            videomodalVisible: false,
            AnswerVisible: false,
            pressed: true,
            passworld: "",
            pagesize: 5,
            currentpage: 1,
            listall: 100,
            caseindex: 2,
            examindex: "",//做排序顺序用
            examitem: '',
            importitem: "",//判断增肌题库窗口是编辑状态还是增加状态，其实和examitem值一样，但是examitem值控制太多了
            entries: [
                { title: "安徒童话", staus: 1, cout: 100, topic_type1: 20, topic_type2: 40, topic_type3: 40 },
                { title: "格林童话", staus: 1, cout: 100, topic_type1: 20, topic_type2: 40, topic_type3: 40 },
                { title: "我的童话", staus: 1, cout: 100, topic_type1: 20, topic_type2: 40, topic_type3: 40 },
                { title: "我的童话", staus: 1, cout: 100, topic_type1: 20, topic_type2: 40, topic_type3: 40 },
                { title: "我的童话", staus: 1, cout: 100, topic_type1: 20, topic_type2: 40, topic_type3: 40 },

            ],
            pagesize: 5,
            pageindex: 0,
            videotime: 0,
            logintime: 60
        }
        // store更新后要实时监听监测返给view视图层。view才知道他更新了，不然view监测不到
        store.subscribe(this._storeChange)
        console.log(store.getState())//首次刷新consrutor周期取getexams为空，而且这个生命周期只执行第一次，导致第一次可能是异步操作延缓在初期渲染之后，异步结束重新赋值这边继续更新所以是在render生命周期时已经更新且这边能取到了，所以界面渲染是可以正常渲染的,但是比如在savetiku题库组件没有监听更新的步骤就一直为空


    }
    // 生命周期查看本地内存是否具有Answering machine文件夹，有就说明都有，没有就说明第一次创建所有文件夹以及几个需要的表
    logintime = () => {
        this.logintimeer = setInterval(() => {
            if (this.state.logintime > 0) {
                this.setState({ logintime: this.state.logintime - 1 })
            } else {
                this.setModalVisible(false)
            }
        }, 1000);
    }
    setModalVisible = (visible) => {
        this.setState({ modalVisible: visible });
        if (visible == true) {
            this.videotimeer && clearTimeout(this.videotimeer);
            this.logintime()//启动登录计时
        } else {
            this.videotimeer && clearTimeout(this.videotimeer);
            this.logintimeer && clearTimeout(this.logintimeer);//取消登录计时
            this.videoauto()
        }
    }//登录窗口
    handtimucloseVisible = (visible, item) => {
        console.log(this.state.tikumodalVisible)
        console.log(visible, item)

        this.setState({ tikumodalVisible: visible });
        if (item) {
            console.log(item)
            this.setState({ importitem: item });
        } else {
            this.setState({ importitem: '' });
        }

    }//增加题目
    handAnswerVisible = (visible, close) => {
        this.setState({ AnswerVisible: visible });
        if (visible == true) {
            this.videotimeer && clearTimeout(this.videotimeer);
        } else {
            this.videotimeer && clearTimeout(this.videotimeer);
            //关闭窗口在本界面才重新启动
            if (close) {
                this.videoauto()
            }
        }
    }//前台答题窗口
    SavetimucloseVisible = (visible) => {
        this.setState({ SaveTikumodelVisible: visible });
    }//编辑题库
    handvideocloseVisible = (visible) => {
        console.log(111111, visible)
        this.setState({ videomodalVisible: visible });
    }//视频增加
    changepassVisible = (visible) => {
        this.setState({ passVisible: visible });
    }//修改密码
    _storeChange = () => {
        // 实现redux和组件同步更新
        /**
         * 当我感知到数据发生变化的时候，我去调用store.getState()从store里面重新去取数据
         * 然后调用setState替换掉当前组件里面的数据
         */
        this.setState(store.getState())
    }
    enterFullScreen = (path) => {
        // 箭头函数可以改变this指向
        console.log(this.props)
        this.setState({ videomodalVisible: false });

        this.props.navigation.navigate('Task', { path: path })

    }
    entermaketest = (data, count) => {
        // 箭头函数可以改变this指向//传参
        console.log(this.props)

        this.props.navigation.navigate('Friend', { data: data, count: count })

    }
    enterDetail = (data, count) => {
        // 箭头函数可以改变this指向//传参
        this.setState({ AnswerVisible: false });//关闭答题界面取消计时器
        this.videotimeer && clearTimeout(this.videotimeer);
        this.props.navigation.navigate('Deal', { data: data, count: count })

    }


    saveexam = (index, item) => {
        // 点击出现编辑弹窗
        // 如果登录状态说明管理后台出现编辑框不是登录状态出现出题框   
        console.log(22)
        this.setState({ examindex: index + 1, examitem: item })
        if (this.state.LOGIN) {
            this.SavetimucloseVisible(true)

        } else {
            this.handAnswerVisible(true)

        }
    }

    _renderItem = (item, index) => {
        let realindex = this.state.pageindex * this.state.pagesize + index
        return (
            <TouchableOpacity style={{ width: '19%' }} key={index} onPress={() => { this.saveexam(index, item) }}
            >

                <View
                    style={[styles.slide, item.staus !== 1 ? { opacity: 0.6 } : '', this.state.examindex == index + 1 ? { borderColor: "#CC985D" } : '']}

                >
                    <ImageBackground
                        style={{ ...styles.slide, width: '100%', height: '100%', borderWidth: 0 }}
                        source={{ uri: item.picturepath ? `file://${item.picturepath}` : '1' }}
                    >
                        <Text style={styles.pageindex}>{this.state.pageindex * this.state.pagesize + index + 1}</Text>
                        <Pressable
                            onPress={() => {
                                console.log(1111)

                                let datas = this.state.getexams
                                let realindex = this.state.pageindex * this.state.pagesize + index
                                if (!this.state.LOGIN) {
                                    this.videotimeer && clearTimeout(this.videotimeer);
                                    this.videoauto()
                                    return;//没登录不可操作
                                }
                                if (item.staus == 1) {
                                    let data = Object.assign(this.state.getexams[realindex], { staus: 0 })
                                    datas[realindex] = data
                                    this.setState({ getexams: datas })

                                } else {
                                    let data = Object.assign(this.state.getexams[realindex], { staus: 1 })
                                    datas[realindex] = data
                                    this.setState({ getexams: datas })
                                }
                                console.log(this.state.getexams)

                            }}
                            style={({ pressed }) => [
                                {
                                    backgroundColor: pressed
                                        ? 'rgb(210, 230, 255)'
                                        : 'white'
                                },
                                styles.status,


                            ]}>
                            <Text style={{ fontSize: 14, color: "#fff", borderRadius: 8, }}>
                                {item.staus == 1 ? '开放' : '隐藏'}
                            </Text>
                        </Pressable>
                        <View style={styles.shawdows}>

                            <Text style={{ color: "#fff", fontSize: 16, marginBottom: '4%' }}>{item.title}</Text>
                            <Text style={{ color: "#fff", fontSize: 10 }}>{"单选题：" + item.danxuan}</Text>
                            <Text style={{ color: "#fff", fontSize: 10 }}>{"多选题：" + item.duoxuan}</Text>
                            <Text style={{ color: "#fff", fontSize: 10 }}>{"判断题：" + item.panduan}</Text>
                        </View>
                    </ImageBackground>

                </View>


            </TouchableOpacity>

        );
    }
    onPresspre = () => {
        this.videotimeer && clearTimeout(this.videotimeer);
        this.videoauto()
        if (this.state.pageindex > 0) {
            this.setState({ pageindex: this.state.pageindex - 1 })
        } else {
            ToastAndroid.showWithGravity('已是第一页', ToastAndroid.SHORT,
                ToastAndroid.CENTER)
        }
    };
    onPressnext = () => {
        this.videotimeer && clearTimeout(this.videotimeer);
        this.videoauto()
        let pageMax = Math.ceil(this.state.getexams.length / this.state.pagesize)
        if (!this.state.LOGIN) {
            let newarrs = this.state.getexams.filter((item) => {
                return item.staus == 1
            })
            pageMax = Math.ceil(newarrs.length / this.state.pagesize)
        }

        console.log(this.state.pageindex, pageMax)
        if (this.state.pageindex + 1 < pageMax) {
            this.setState({ pageindex: this.state.pageindex + 1 })
        } else {
            ToastAndroid.showWithGravity('最后一页', ToastAndroid.SHORT,
                ToastAndroid.CENTER)
        }

    };
    onScroll = (e) => {
        console.log(e)
    }
    onSnapToItem = (slideIndex) => {
        console.log(slideIndex)
    }
    onChangeText = (text) => {
        console.log(text)
        this.setState({ passworld: text });
    }
    onChangecompanyText = (text) => {
        var item = this.state.user[0]
        var user = { ...item, companyName: text }
        this.setState({ user: [user] });
    }
    onChangesystemText = (text) => {
        var user = { ...this.state.user[0], systemName: text }
        // var user = { ...this.state.user[0], companyName: "南京市鼓楼区税务局单位", systemName: "党建学习" }

        this.setState({ user: [user] });
    }
    saveinfo = () => {
        //   保存标题，题库开放和隐藏情况同事注销登录状态
        console.log(this.state.user)
        const action = changeloginStatus(false)
        store.dispatch(action)
        console.log(this.state.user)
        const action1 = getuser(this.state.user)
        store.dispatch(action1)
        RNFS.writeFile(examinationpath, JSON.stringify(this.state.getexams), 'utf8')
            .then((success) => {
                var action = getexam()
                store.dispatch(action)
                RNFS.writeFile(userpath, JSON.stringify(this.state.user), 'utf8')
                    .then((success) => {
                        console.log(this.state.LOGIN, store.getState())
                        this.videoauto()
                        ToastAndroid.showWithGravity('保存退出成功', ToastAndroid.SHORT,
                            ToastAndroid.CENTER)


                    })
                    .catch((err) => {
                        console.log(err.message);
                    })
            })
            .catch((err) => {
                console.log(err.message);
            })
    }
    uploaduser(user) {
        RNFS.writeFile(userpath, JSON.stringify(user), 'utf8')
            .then((success) => {
                const action1 = getuser(user)
                store.dispatch(action1)
                ToastAndroid.showWithGravity('修改成功', ToastAndroid.SHORT,
                    ToastAndroid.CENTER)



            })
            .catch((err) => {
                console.log(err.message);
            })
    }
    login = () => {
        // 看是否有user.txt文本，有的话就读取数据匹配，密码正确进行登录
        if (!this.state.passworld) {
            ToastAndroid.showWithGravity('请输入密码', ToastAndroid.SHORT,
                ToastAndroid.CENTER)
            return;
        }
        var rightpassword = this.state.user[0].password
        console.log(rightpassword)
        if (rightpassword == this.state.passworld) {
            this.setModalVisible(!this.state.modalVisible);
            // 改变store登录状态，但是view视图层不知道改变了
            const action = changeloginStatus(true)
            store.dispatch(action)
            this.videotimeer && clearTimeout(this.videotimeer);


        } else {
            ToastAndroid.showWithGravity('密码不正确请重新输入', ToastAndroid.SHORT,
                ToastAndroid.CENTER)
            this.setModalVisible(!this.state.modalVisible);

        }
        console.log(this.state.LOGIN, store.getState())
    }
    changepass = () => {
        if (this.state.repassworld !== this.state.user[0].password + '') {
            ToastAndroid.showWithGravity('旧密码不正确请重新输入', ToastAndroid.SHORT,
                ToastAndroid.CENTER)
            return
        }
        if (this.state.newpassworld.length < 6) {
            ToastAndroid.showWithGravity('新密码不足六位', ToastAndroid.SHORT,
                ToastAndroid.CENTER)
            return
        }
        // 开始修改密码
        var user = [{ ...this.state.user[0], password: this.state.newpassworld }]
        console.log(this.state.repassworld, this.state.newpassworld)

        this.uploaduser(user)


    }
    static navigationOptions = {
        // header: null,
        headerShown: false,
        tabBarLabel: '好友1',
        tabBarIcon: ({ focused }) => {
            if (focused) {
                return (
                    // taber下面应该是图片上面是文字
                    <Text>这是好友2</Text>
                    // <Image style={styles.tabBarIcon} source={require('../../img/fri_sel.png')}/>
                );
            }
            return (
                <Text>这是好友3</Text>
                // <Image style={styles.tabBarIcon} source={require('../../img/fri_nor.png')}/>
            );
        },
    };
    componentDidMount = async () => {

        // ToastExample.show('Awesome', ToastExample.SHORT);
        //  初次检测存储卡有没有文件夹，有的话以后所有需要判断的文件夹Answering machine
        //不用在挨个判断了直接读取路径就好了，没有的话就自动创建文件夹在存储卡里就行了DocumentDirectoryPath
        let filePath = RNFS.ExternalDirectoryPath + '/AnsweringMachine'
        let mysqle = filePath + '/mysqle'//所有记录数据的text 【题库表，成绩表，抽题数量类型，用户表，视频表】  
        let Images = filePath + '/Images' // 静态图片               
        let examinationpicture = Images + '/examinationpicture' // 答题卡静态图片               
        let Videospicture = Images + '/Videospicture'//视频封面图片    
        let Videos = filePath + '/Videos'//视频文件夹                 
        let examination = filePath + '/examination' //题目excel数据库                
        let examinationPDF = filePath + '/examinationPDF' // pdf文件夹               

        const isExists = await FileUtil.isExistFile(filePath);
        console.log(isExists, filePath)
        if (!isExists) {
            // 没有开始创建文件夹
            await RNFS.mkdir(filePath).then((res) => {
                RNFS.mkdir(Images).then((res) => {//图片文件夹创立好
                    RNFS.mkdir(examinationpicture).then((res) => {
                        console.log('examinationpicture ')
                    })
                    RNFS.mkdir(Videospicture).then((res) => {
                        console.log('Videospicture ')
                    })

                })
                RNFS.mkdir(Videos).then((res) => {//视频文件夹
                    console.log('Videos ')

                })
                RNFS.mkdir(examination).then((res) => {//题库文件夹
                    console.log('examination ')

                })
                RNFS.mkdir(examinationPDF).then((res) => {//题库文件夹
                    console.log('examinationPDF ')

                })
                RNFS.mkdir(mysqle).then((res) => {//database文件夹
                    console.log('mysqle ')
                    // 创建user.txt,examination.txt,grade.txt,counttype.txt,video.txt
                    let userpath = mysqle + '/user.txt'
                    let examinationpath = mysqle + '/examination.txt'
                    let gradepath = mysqle + '/grade.txt'
                    let counttypepath = mysqle + '/counttype.txt'
                    let videopath = mysqle + '/video.txt'
                    let database = [userpath, examinationpath, gradepath, counttypepath, videopath]
                    database.map(item => {
                        let arr = []
                        if (item == userpath) {
                            obj = { username: 'admin', password: 123456, companyName: "XXX区XXXX单位", systemName: "党建学习", autotime: 0, issort: 1 }
                            arr.push(obj)
                            const action = getuser(arr)
                            store.dispatch(action)
                        }
                        RNFS.writeFile(item, JSON.stringify(arr), 'utf8')
                            .then((success) => {
                                console.log('FILE WRITTEN' + ' ' + item);
                            })
                            .catch((err) => {
                                console.log(err.message);
                            });
                    })


                })
                console.log(res, FileUtil.isExistFile(filePath), 11111)

            })

        } else {
            console.log('存储数据结构文件夹已经建立好2')
            // 获取答题卡
            // 读取user.txt
            await RNFS.readFile(userpath, 'utf8').then(res => {
                var arr = JSON.parse(res)
                const action = getuser(arr)
                store.dispatch(action)
                console.log('hhhhh', action, this.state.user)

            }).catch(err => {
                console.log(err)
            })
            var action = getexam()
            store.dispatch(action)
            console.log(this.state.getexams)

        }
        if (!this.state.LOGIN) {
            this.videoauto()
        }
    }
    onBackAndroid = () => {

        //禁用返回键
        if (this.props.navigation.isFocused()) {//判断   该页面是否处于聚焦状态
            // if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
            //   //最近2秒内按过back键，可以退出应用。
            //   // return false;
            //   BackHandler.exitApp();//直接退出APP
            // }else{
            //   this.lastBackPressed = Date.now();
            //   ToastAndroid.show('再按一次退出应用', 1000);//提示
            //   return true;
            // }
            BackHandler.exitApp();//直接退出APP

        }
    }
    videoauto = async () => {
        //  this.state.user
        // var issort = this.state.user[0].issort - 0
        // 有窗口取消计时器。停止计时器
        console.log('wwwwwwwwwww', this.state.user[0])
        let arr = [];
        await RNFS.readDir(Videos) // On Android, use "RNFS.DocumentDirectoryPath（内置存储）" (MainBundlePath is not defined)
            .then((result) => {
                arr = result
            })
        if (!this.state.LOGIN) {
            var autotime = (this.state.user[0].autotime - 0) * 60 * 1000 //分钟*60*1000
            if (autotime == 0 || arr.length == 0) {
                // 视频参数设置为0和视频文件夹无视频后续不执行不播放视频，
                return

            }
            // var autotime = 10//1分钟*60*1000
            this.setState({ videotime: autotime })
            this.videotimeer = setTimeout(() => {
                // if (this.state.videotime > 0) {
                console.log('jjjjjjjjjjjjjjj', this.state.user)
                //     this.setState({ videotime: this.state.videotime - 1 })
                //     console.log(this.state.videotime)
                // } else {
                //     this.videotimeer && clearTimeout(this.videotimeer);
                //     this.props.navigation.navigate('Task')
                // }
                this.videotimeer && clearTimeout(this.videotimeer);
                this.props.navigation.navigate('Task')
            }, autotime);

        } else {
            this.videotimeer && clearTimeout(this.videotimeer);
        }

    }
    UNSAFE_componentWillMount() {
        this._gestureHandlers = {
            accessible: true,
            // importantForAccessibility: 'no-hide-descendants',
            onStartShouldSetResponder: () => true,  //对触摸进行响应
            // onStartShouldSetResponderCapture: () => true, 交权所有点击子事件不执行
            onMoveShouldSetResponder: () => true,  //对滑动进行响应
            onResponderGrant: () => {
                console.log("parent onResponseGrant");
                this.videotimeer && clearTimeout(this.videotimeer);
                if (!this.state.LOGIN) {
                    this.videoauto()
                }
            }, //激活时做的动作
        }
        console.log(this.state.user[0], 'hhhhhhhhhhhhh')
        //如果判断没有登录情况下，界面启动开始调用计时器，5秒后调用，可点击的启动杀死当前计时器从新启动，

    }
    componentWillUnmount() {
        this.videotimeer && clearTimeout(this.videotimeer);

    }
    render() {
        const { modalVisible, passVisible, tikumodalVisible, videomodalVisible, AnswerVisible, passworld, newpassworld, repassworld, LOGIN, company, system, user, SaveTikumodelVisible, examitem, examindex, importitem } = this.state;
        var item = user[0]
        // 判断是否登录状态，不显示为0字段就隐藏卡片
        var newarrs = this.state.getexams
        if (!this.state.LOGIN) {
            // 不要改变this.state.getexams数组返回一个新数组给渲染
            newarrs = newarrs.filter((item) => {
                return item.staus == 1
            })
        }
        var newarr = newarrs.slice(this.state.pageindex * this.state.pagesize, (this.state.pageindex + 1) * this.state.pagesize);

        // console.log('fffffffff', newarr, this.state.pageindex, this.state.pagesize)


        return (
            // <TouchableWithoutFeedback onPress={() => { console.log(111111111112222222) }} style={{ backgroundColor: "#fff" }}>
            <View style={{ ...styles.container }}    {...this._gestureHandlers} >
                <ImageBackground
                    style={{ height: '100%', width: '100%', borderWidth: 0 }}
                    source={require('../../../../assets/imgs/a1/bigbackground.png')}
                    imageStyle={{ resizeMode: 'cover' }}

                >
                    <View style={{ padding: 10 }} >
                        {
                            LOGIN ? (<Pressable  style={{position: "absolute", right: 10, top: 5,width:100,height:50,zIndex:100}} onPress={() => { this.saveinfo() }}>
                                <Image
                                    style={{ width: 20, height: 20, position: "absolute", right: 70, top: 10 }}
                                    source={require('../../../../assets/imgs/baocun-tianchong.png')} />
                                <Text style={{ color: '#76F9F6', textAlign: 'right', width: 60, position: "absolute", right: 10, top: 10, zIndex: 100, }} >保存退出</Text>
                            </Pressable>) : (<Pressable style={{position: "absolute", right: 10, top: 5,width:100,height:50,zIndex:100}} onPress={() => { this.setModalVisible(true) }}>
                                <Image
                                    style={{ width: 20, height: 20, position: "absolute", right: 60, top: 10 }}
                                    source={require('../../../../assets/imgs/touxiang.png')} />
                                <Text style={{ color: '#76F9F6', textAlign: 'right', width: 50, position: "absolute", right: 10, top: 10, zIndex: 100, }} >管理员</Text>
                            </Pressable>)
                        }
                        <Modal
                            animationType="slide"
                            transparent={true}
                            visible={modalVisible}
                            onRequestClose={() => {
                                Alert.alert("Modal has been closed.");
                            }}
                        >

                            <View style={styles.centeredView} >

                                <ImageBackground style={{ ...styles.modalView }}
                                    source={require('../../../../assets/imgs/a1/background.png')}
                                    imageStyle={{ resizeMode: 'stretch' }}
                                >


                                    <Pressable style={{ position: "absolute", right: 7, top: 2, zIndex: 100, }} onPress={() => { this.setModalVisible(false) }}><Image
                                        style={{ width: 40, height: 40 }}
                                        source={require('../../../../assets/imgs/close.png')}

                                    /></Pressable >
                                    <Text style={styles.modalText}>请输入管理员密码</Text>
                                    <TextInput
                                        style={{ height: 40, width: 200, borderColor: '#62AEDD', backgroundColor: "#3070AF", borderWidth: 1, color: "#fff" }}
                                        onChangeText={text => this.onChangeText(text)}
                                        value={passworld}
                                        secureTextEntry={true}
                                        keyboardType="default"
                                        clearButtonMode='while-editing'
                                        selectionColor="black"
                                        underlineColorAndroid='transparent'
                                    />
                                    <TouchableHighlight
                                        style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
                                        onPress={this.login}
                                    >
                                        <Text style={styles.textStyle} onPress={this.login}>确定</Text>
                                    </TouchableHighlight>
                                    <Text style={{ fontSize: 8, color: "#fff", marginTop: 3 }}>请在1分钟之内输入密码，否则自动关闭  计时：{this.state.logintime}秒</Text>

                                </ImageBackground>
                            </View>

                        </Modal>
                        <Modal
                            animationType="slide"
                            transparent={true}
                            visible={passVisible}
                            onRequestClose={() => {
                                Alert.alert("Modal has been closed.");
                            }}
                        >
                            <View style={styles.centeredView}>
                                <ImageBackground style={{ ...styles.modalView, height: 220 }}
                                    source={require('../../../../assets/imgs/a1/background.png')}
                                    imageStyle={{ resizeMode: 'stretch' }}
                                >
                                    <Pressable style={{ position: "absolute", right: 7, top: 2, zIndex: 100, }} onPress={() => { this.changepassVisible(false) }}><Image
                                        style={{ width: 40, height: 40 }}
                                        source={require('../../../../assets/imgs/close.png')}

                                    /></Pressable >

                                    <Text style={styles.modalText}>密码修改</Text>
                                    <TextInput
                                        style={{ height: 40, width: 200, borderColor: '#62AEDD', backgroundColor: "#3070AF", borderWidth: 1, color: "#fff" }}
                                        onChangeText={text => { this.setState({ repassworld: text }) }}
                                        value={repassworld}
                                        secureTextEntry={true}
                                        keyboardType="default"
                                        placeholder='旧密码'
                                        clearButtonMode='while-editing'
                                        selectionColor="black"
                                        underlineColorAndroid='transparent'
                                    />
                                    <TextInput
                                        style={{ height: 40, width: 200, borderColor: '#62AEDD', backgroundColor: "#3070AF", borderWidth: 1, color: "#fff", marginTop: 5 }}
                                        onChangeText={text => { this.setState({ newpassworld: text }) }}
                                        value={newpassworld}
                                        secureTextEntry={true}
                                        keyboardType="default"
                                        clearButtonMode='while-editing'
                                        selectionColor="black"
                                        placeholder='新密码（请输入至少6位）'
                                        underlineColorAndroid='transparent'
                                    />
                                    <TouchableHighlight
                                        style={{ ...styles.openButton, backgroundColor: "#2196F3" }}


                                    >
                                        <Text style={styles.textStyle} onPress={() => { this.changepass() }}>修改</Text>
                                    </TouchableHighlight>
                                </ImageBackground>
                            </View>
                        </Modal>

                    </View>
                    {/* 这个包裹在View元素中的Text表现为block，可以设置margin和padding的各种属性 */}
                    <View style={styles.head}>
                        {/* 在Text元素中的Text表现为inline元素，不能设置其marginTop和marginBottom， padding等用于block元素的属性 */}
                        {/* 登录后切换input可以修改，判断登录状态 */}
                        {
                            LOGIN ? (<View style={{ width: '50%' }}>
                                <TextInput
                                    style={{ height: 35, borderColor: '#62AEDD', backgroundColor: "#3070AF", borderWidth: 1, color: "#fff", width: '100%', marginBottom: 5, fontSize: 12, lineHeight: 8 }}
                                    onChangeText={text => this.onChangecompanyText(text)}
                                    clearButtonMode='while-editing'
                                    selectionColor="black"
                                    value={item.companyName || ''}


                                />
                                <TextInput
                                    style={{ height: 35, borderColor: '#62AEDD', backgroundColor: "#3070AF", borderWidth: 1, color: "#fff", width: '100%', lineHeight: 8 }}
                                    clearButtonMode='while-editing'
                                    selectionColor='red'
                                    keyboardType="default"
                                    placeholderTextColor={'black'}
                                    underlineColorAndroid='transparent'
                                    onChangeText={text => this.onChangesystemText(text)}
                                    value={item.systemName || ''}


                                />
                                <Text style={{ fontSize: 10, color: "#91B8DB", fontWeight: "bold", lineHeight: 30, textAlign: "center" }}>{item.companyName + item.systemName}</Text>

                            </View>) : (<Text style={{
                                textAlign: "center", letterSpacing: 2,
                                lineHeight: 30,
                                fontWeight: "bold", color: "#fff", fontSize: 25
                            }}>
                                <Text>{item ? item.companyName : ""}</Text><Text>{'\n'}</Text>
                                <Text>{item ? item.systemName : ""}</Text><Text>{'\n'}</Text>
                                <Text style={{ fontSize: 10, color: "#91B8DB", fontWeight: "bold", lineHeight:35,position:"relative" }}>请选择一个答题范围</Text>
                            </Text>)
                        }

                    </View>

                    <View style={styles.wrapper}>
                        {/* <Swiper style={styles.wrapper} showsButtons={true}
                    autoplay={true}
                    height={300} 
                    >
                        <View style={styles.slide1}>
                            <Text style={styles.text}>Hello Swiper</Text>
                        </View>
                        <View style={styles.slide2}>
                            <Text style={styles.text}>Beautiful</Text>
                        </View>
                        <View style={styles.slide3}>
                            <Text style={styles.text}>And simple</Text>
                        </View>
                    </Swiper> */}
                        {/* <Carousel
                        ref={(c) => { this._carousel = c; }}
                        data={this.state.entries}
                        firstItem={this.state.caseindex}
                        renderItem={this._renderItem}
                        enableSnap={true}
                        layoutCardOffset={800}
                        sliderWidth={sliderWidth}
                        itemWidth={itemWidth
                          inactiveSlideOpacity={0.6}
                        activeSlideOffset={20}
                        contentContainerCustomStyle={styles.carouselwrapper}
                        onScroll={this.onScroll}
                        onSnapToItem={this.onSnapToItem}

                    /> */}
                        <View style={styles.carouselwrapper}>
                            {
                                newarr && newarr.length > 0 ? (
                                    newarr.map((item, index) => {
                                        return this._renderItem(item, index)
                                    })
                                ) : (<Text style={{ color: "#fff", marginTop: 100 }}>无题库，如有需要，您可以点击导入题库按钮添加题库。</Text>)
                            }
                        </View>
                        <TouchableOpacity
                            style={styles.tinyLogo1}
                            onPress={this.onPresspre}
                        >
                            <Image
                                style={styles.imgs}
                                source={require('../../../../assets/imgs/houtui.png')} />
                        </TouchableOpacity>
                        <TouchableOpacity
                            style={styles.tinyLogo2}
                            onPress={this.onPressnext}
                        >
                            <Image
                                style={styles.imgs}
                                source={require('../../../../assets/imgs/qianjin.png')} />
                        </TouchableOpacity>
                    </View>
                    <View style={{width:'100%',textAlign:"center",alignItems:"center"}}><Text style={{color:"#fff"}}>{`${this.state.pageindex+1}/${Math.ceil(newarrs.length / this.state.pagesize)}`}</Text></View>

                    <View style={styles.Bottom}>
                        {
                            LOGIN ? (
                                <>

                                    <Pressable
                                    onPress={() => { this.onBackAndroid() }}

                                    >
                                        <ImageBackground
                                            style={{ ...styles.btns, alignItems: "center", justifyContent: "center" }}
                                            imageStyle={{ resizeMode: 'stretch' }}
                                            source={require('../../../../assets/imgs/a1/yellow.jpg')}
                                        >
                                              <Text style={{ fontSize: 18, color: "#fff", borderRadius: 8, }} >
                                                退出系统
                                             </Text>     

                                       </ImageBackground>

                                                                                           

                                    </Pressable>
                                    <Pressable
                                     onPress={() => {
                                        this.changepassVisible(true)
                                    }}
                                    >
                                          <ImageBackground
                                            style={{ ...styles.btns, alignItems: "center", justifyContent: "center" }}
                                            imageStyle={{ resizeMode: 'stretch' }}
                                            source={require('../../../../assets/imgs/a1/yellow.jpg')}
                                        >
                                            <Text style={{ fontSize: 18, color: "#fff", borderRadius: 8, }}>
                                            修改密码
                                          </Text>                        
                                       </ImageBackground>
                                       
                                    </Pressable>
                                    <Pressable
                                    onPress={() => this.handtimucloseVisible(true)}
                                    >
                                        
                                        <ImageBackground
                                            style={{ ...styles.btns, alignItems: "center", justifyContent: "center" }}
                                            imageStyle={{ resizeMode: 'stretch' }}
                                            source={require('../../../../assets/imgs/a1/yellow.jpg')}
                                            
                                        >
                                           <Text style={{ fontSize: 18, color: "#fff", borderRadius: 8, }} >
                                            导入题库
                                          </Text>               
                                       </ImageBackground>
                                      
                                    </Pressable>
                                    <Pressable
                                      onPress={() => this.handvideocloseVisible(true)}
                                    >
                                         <ImageBackground
                                            style={{ ...styles.btns, alignItems: "center", justifyContent: "center" }}
                                            imageStyle={{ resizeMode: 'stretch' }}
                                            source={require('../../../../assets/imgs/a1/yellow.jpg')}
                                                                                     
                                         >
                                           <Text style={{ fontSize: 18, color: "#fff", borderRadius: 8, }} >
                                            视频管理
                                           </Text>           
                                       </ImageBackground>                                     
                                    </Pressable>
                                </>
                            ) : null
                        }
                        <Videomodel videomodalVisible={videomodalVisible} handvideocloseVisible={this.handvideocloseVisible} enterFullScreen={this.enterFullScreen}></Videomodel>
                        <Tikumodel tikumodalVisible={tikumodalVisible} handtimucloseVisible={this.handtimucloseVisible} importitem={importitem}></Tikumodel>
                    </View>
                    {/* 没有登录页可以点击，因为学生可以不登录答题，老师登录是要进行管理数据操作 */}
                    <SaveTikumodel SaveTikumodelVisible={SaveTikumodelVisible} SavetimucloseVisible={this.SavetimucloseVisible} examitem={examitem} examindex={this.state.pageindex * this.state.pagesize + examindex
                    } handtimucloseVisible={this.handtimucloseVisible} entermaketest={this.entermaketest}></SaveTikumodel>
                    <Answermodel AnswerVisible={AnswerVisible} handAnswerVisible={this.handAnswerVisible} examitem={examitem} enterDetail={this.enterDetail}></Answermodel>
                </ImageBackground>
            </View>
            // </TouchableWithoutFeedback>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: '#17499D',
        height: '100%',
        width: '100%'



    },
    tabBarIcon: {
        width: 21,
        height: 21,
    },
    touxiang: {
        textAlign: 'right'

    },
    head: {
        height: '25%',
        color: "#fff",
        textAlign: "center",
        display: 'flex',
        flexDirection: "row",
        justifyContent: "center",
        // backgroundColor:"#fff",
        // flex:1,
        // justifyContent:"center"
        letterSpacing: 2,
        marginTop: '1%',
        fontWeight: "bold"


    },

    wrapper: {
        marginTop: 20,
        width: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        height: '40%',


    },
    carouselwrapper: {
        width: '85%',
        height: '100%',
        display: "flex",
        flexDirection: "row",
        justifyContent: 'space-evenly',
        alignItems: "center",
    },
    slide: {
        // height: 100,
        borderRadius: 10,
        margin: 5,
        width: '100%',
        // flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#3171AF',
        borderColor: '#62AEDD',

        borderWidth: 3,

    },
    shawdows: {
        backgroundColor: 'rgba(0, 0, 0.1, 0.2)',

        width: "70%",
        height: '70%',
        justifyContent: "center",
        alignItems: "center"
    },
    pageindex: {
        backgroundColor: "#62AFDD",
        padding: 3,
        color: '#fff',
        fontWeight: "bold",
        position: "absolute",
        fontSize: 16,
        top: 0,
        left: 0

    },
    status: {
        backgroundColor: "#62AFDD",
        padding: 1,
        color: '#fff',
        position: "absolute",
        fontSize: 2,
        right: 0,
        top: 0
    },
    tinyLogo1: {
        position: "absolute",
        width: 80,
        height: 80,
        left: -8
    },
    tinyLogo2: {
        position: "absolute",
        width: 80,
        height: 80,
        right: 4
    },
    imgs: {
        height: 100,
        width: 100
    },
    slide1: {
        width: '20%',
        // flex:1,
        // justifyContent: 'center',
        // alignItems: 'center',
        backgroundColor: 'blue'
    },
    slide2: {
        width: '20%',
        // flex:1,

        // justifyContent: 'center',
        // alignItems: 'center',
        backgroundColor: 'blue'
    },
    slide3: {
        width: '20%',
        // flex:1,

        // justifyContent: 'center',
        // alignItems: 'center',
        backgroundColor: 'blue'
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold'
    },
    // model样式
    centeredView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 22,
    },
    modalView: {
        width: 300,
        height: 180,
        margin: 20,
        // backgroundColor: "#3078BB",
        borderRadius: 20,
        padding: 35,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,

    },
    openButton: {
        backgroundColor: "#F194FF",
        borderRadius: 5,
        padding: 2,
        elevation: 2,
        marginTop: 20,
        width: 100,
        fontSize: 8,
    },
    textStyle: {
        color: "white",
        fontWeight: "bold",
        textAlign: "center"
    },
    modalText: {
        marginBottom: 15,
        textAlign: "center",
        color: '#fff'
    },
    Bottom: {

       
        flexDirection: "row",//rn默认column
        justifyContent: 'space-around',
        alignItems:"center",
    },
    btns: {
        // backgroundColor: '#CC975D',
        width: 110,
        height: 40,
        textAlign: 'center',
        lineHeight: 40,
        fontWeight: 'bold'
    }

});